<template>
  <d2-container>
    <template slot="header">合同信息</template>
    <el-button type="success" @click="dialogVisible = true">新增</el-button>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="400">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="合同号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="适用范围"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="折扣"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="合同开始时间"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="合同结束时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="签署人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="附件"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="备注"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editRow(scope.$index, tableData)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="合同号">
          <el-input v-model="form.contractNo" placeholder="单位名称"></el-input>
        </el-form-item>
        <el-form-item label="适用范围">
          <el-select v-model="form.contractType" placeholder="请选择活动区域">
            <el-option label="计量" value="1"></el-option>
            <el-option label="检测" value="2"></el-option>
            <el-option label="公用" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同折扣">
          <el-input v-model="formInline.contractDiscount" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="合同签署人部门">
          <el-select v-model="form.departmentId" placeholder="请选择活动区域">
            <el-option label="计量" value="shanghai"></el-option>
            <el-option label="检测" value="beijing"></el-option>
            <el-option label="公用" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同签署人">
          <el-select v-model="form.userId" placeholder="请选择活动区域">
            <el-option label="计量" value="1"></el-option>
            <el-option label="检测" value="2"></el-option>
            <el-option label="公用" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同有效期开始时间">
          <el-input v-model="form.contractValidateBegin" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="合同有效结束时间">
          <el-input v-model="form.contractValidateEnd" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="合同签署日期">
          <el-input v-model="form.contractSignDate" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="合同备注">
        <el-input v-model="form.contractRemark" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </d2-container>
</template>

<script>
export default {
  name: 'customer_contract',
  data () {
    return {
      dialogVisible: false,
      tableData: [
        {
          id: '1',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          id: '03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      form: {
        name: ''
      }
    }
  }
}
</script>
